<template>
  <div>
    <Title :title="tableTitle" style="margin-bottom: 16px;" />
    <u-table
      ref="customerTableRef"
      :data="tableList"
      :border="true"
      :row-height="49"
      use-virtual
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
    >
      <EmptyPlaceholder slot="empty" mode="table" />
      <u-table-column align="left" label="序号" type="index" width="60" fixed />
      <u-table-column align="left" label="项目名称">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.contractSourceType === 1" :content="scope.row.projectName" is-can-click @handelClick="handelClick(scope.row)" />
          <ToolTip v-else :content="scope.row.projectName" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="合同编号">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.contractNum" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="合同类型" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="contractTypeMap(scope.row.contractType)" />
        </template>
      </u-table-column>
      <u-table-column v-if="showOppCompany" align="left" label="签约对方" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.oppCompany" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="申请人">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.proposerName" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="申请人部门" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.proposerDepartmentName" />
        </template>
      </u-table-column>
    </u-table>
    <div style="text-align: right;">
      <el-pagination
        v-show="list.length > 10"
        :current-page="page"
        :page-size="perPage"
        :total="list.length"
        :page-sizes="[10, 20, 50, 100, 250, 500]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { contractTypeMap } from '@/filters/status';
import { encryption } from '@/utils';
import { hasRouteAuth } from '@/utils/permission';
export default {
  components: {
    Title,
    EmptyPlaceholder
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    tableTitle: {
      type: String,
      default: '关联合同'
    },
    showOppCompany: { // 是否显示签约对方字段
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: 1,
      perPage: 10
    };
  },
  computed: {
    tableList() {
      return this.list.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    }
  },
  methods: {
    contractTypeMap,
    hasRouteAuth,
    handelClick(row) {
      const url = this.$router.resolve({
        name: 'contractDetail',
        params: {
          id: encryption(row.id)
        },
        query: {
          processId: encryption(row.processId)
        }
      });
      window.open(url.href, '_blank');
    },
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
    }
  }
};
</script>

<style>
</style>
